<template>
    <component :is="inputComponent" v-bind="mergedProps">
        <template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
            <slot :name="item" v-bind="data || {}"> </slot>
        </template>
    </component>
</template>

<script setup lang="ts">
import { isString } from "@/utils"
import { components } from "./components/component"
import { InputProps } from "./types"

const props = defineProps<InputProps>()
const inputComponent = isString(props.type) ? components[props.type as string] : (props.type as Component)
const mergedProps = computed(() => {
    const { clearable, placeholder, type } = props
    const p: Recordable = { clearable }
    if (type === "password" || type === "textarea") {
        p.type = type
    }
    if (!placeholder) {
        if (type === "password") {
            p.placeholder = "请输入密码"
        } else if (type === "select") {
            p.placeholder = "请选择"
        } else {
            p.placeholder = "请输入"
        }
    }
    return Object.assign({}, props.nativeProps, p)
})
</script>
